
import { Map, View, Feature } from 'ol'
import TileLayer from 'ol/layer/Tile'
import Vector from 'ol/layer/Vector'
import TileWMS from 'ol/source/TileWMS'
import VectorSource from 'ol/source/Vector'
import _ from 'lodash'
import { Style, Fill, Stroke, Icon, Text } from 'ol/style'
import { Point, Polygon, LineString } from 'ol/geom'

// 节点绘制
export const drawMapPointe = (pointdata) => {
    if (pointdata.geom === null) {
        return;
    }
    let iconFeature = new Feature({
        geometry: new Point(JSON.parse(pointdata.geom))
    })
    if (pointdata.imgUrl) {
        let iconStyle = new Style({
            image: new Icon({
                anchor: [0.5, 100],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: pointdata.imgUrl,
                scale: 0.123
            })
        })
        iconFeature.setStyle(iconStyle)
    }
    iconFeature.geom = pointdata.geom;
    iconFeature.featureId = pointdata.id;
    iconFeature.ol_uid = pointdata.id;
    iconFeature.lineWidth = pointdata.lineWidth;
    iconFeature.lineColor = pointdata.lineColor;
    iconFeature.borderWidth = pointdata.borderWidth;
    iconFeature.borderColor = pointdata.borderColor;
    iconFeature.fillColor = pointdata.fillColor;
    return iconFeature
}

// 绘制dma小区区域
export const drawMapPolygon = (polygondata) => {
    let iconFeature = new Feature(
        new Polygon([JSON.parse(polygondata.geom)])
    )
    let iconStyle = new Style({
        fill: new Fill({
            color: polygondata.fillColor
        }),
        stroke: new Stroke({
            color: polygondata.borderColor,
            width: polygondata.borderWidth
        }),
        text: new Text({
            textAlign: 'center',
            text: polygondata.name,
            font: '14px Calibri,sans-serif',
            height: '100',
            fill: new Fill({
                color: '#fff'
            })
        })
    })
    iconFeature.geom = polygondata.geom;
    iconFeature.featureId = polygondata.id;
    iconFeature.ol_uid = polygondata.id;
    iconFeature.lineWidth = polygondata.lineWidth;
    iconFeature.lineColor = polygondata.lineColor;
    iconFeature.borderWidth = polygondata.borderWidth;
    iconFeature.borderColor = polygondata.borderColor;
    iconFeature.fillColor = polygondata.fillColor;
    iconFeature.setStyle(iconStyle)
    return iconFeature
}

// 绘制管网线路
export const drawMapLineString = (linestringdata) => {
    let iconFeature = new Feature(
        new LineString(JSON.parse(linestringdata.geom), 'XY')
    )
    let iconStyle = new Style({
        stroke: new Stroke({
            color: linestringdata.lineColor,
            width: linestringdata.lineWidth
        })
    })
    iconFeature.geom = linestringdata.geom;
    iconFeature.featureId = linestringdata.id;
    iconFeature.ol_uid = linestringdata.id;
    iconFeature.lineWidth = linestringdata.lineWidth;
    iconFeature.lineColor = linestringdata.lineColor;
    iconFeature.borderWidth = linestringdata.borderWidth;
    iconFeature.borderColor = linestringdata.borderColor;
    iconFeature.fillColor = linestringdata.fillColor;
    iconFeature.setStyle(iconStyle)
    return iconFeature
}

/**
 * 往图层添加要素
 * @param {*} layer 
 * @param {*} feature 
 */
export const addFeature = (layer, feature) => {
    if (!layer.getSource()) {
        return;
    }
    layer.getSource().addFeature(feature);
}

/**
 * 移除图层的某个要素
 * @param {*} layer 
 * @param {*} feature 
 */
export const removeFeature = (layer, feature) => {
    if (!layer || layer === null || !layer.getSource() || !feature || feature === null || layer.getSource().getFeatureByUid(feature.ol_uid) == null) {
        return;
    }
    layer.getSource().removeFeature(feature);
}

/**
 * 移除图层的所有要素
 * @param {*} layer 
 */
export const removeAllFeature = (layer) => {
    if (!layer.getSource()) {
        return;
    }
    layer.getSource().clear();
}

/**
 * 根据layerId判断图层是否已经存在
 * @param {*} map 地图容器
 * @param {*} layerId 图层的layerId属性
 * @returns {*} layer 返回图层对象，若没有，则返回undefined
 */
export const isLayerExitByLayerId = (map, layerId) => {
    let layers = map.getLayers();
    let layer;
    for (let i = 0; i < layers.getArray().length; i++) {
        let _layerId = layers.getArray()[i].layerId;
        if (_layerId === layerId) {
            layer = layers.getArray()[i]
        }
    }
    return layer;
}

/**
 * 要素高亮显示
 * @author suzh
 * @param {*} map 地图容器
 * @param {*} feature 需要高亮的要素
 */
export const highlightFeature = (map, feature, img) => {
    let highlightLayer = isLayerExitByLayerId(map, "highlightLayer");
    let hightStyle = new Style({
        stroke: new Stroke({
            color: "rgba(190, 123, 123, 0.6)",
            width: 15
        }),
        fill: new Fill({
            color: "rgba(190, 123, 123, 0.6)"
        }),
    });
    //高亮图层不存在，就新建一个高亮图层
    if (!highlightLayer) {
        let imgUrl = img || 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
        //高亮样式设置
        hightStyle = new Style({
            stroke: new Stroke({
                color: "rgba(190, 123, 123, 0.6)",
                width: 15
            }),
            fill: new Fill({
                color: "rgba(190, 123, 123, 0.6)"
            }),
            image: new Icon({
                anchor: [0.5, 500],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: imgUrl,
                scale: 0.1
            })
        })
        //高亮风格的图层：
        highlightLayer = new Vector({
            source: new VectorSource(),
            style: hightStyle
        });
        highlightLayer.layerId = "highlightLayer";
        map.addLayer(highlightLayer);
    } else {
        if (img) {
            //高亮样式设置
            hightStyle = new Style({
                stroke: new Stroke({
                    color: "rgba(190, 123, 123, 0.6)",
                    width: 15
                }),
                fill: new Fill({
                    color: "rgba(190, 123, 123, 0.6)"
                }),
                image: new Icon({
                    anchor: [0.5, 46],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: img,
                    scale: 1
                })
            })
            highlightLayer.setStyle(hightStyle);
        }else {
            highlightLayer.setStyle(hightStyle);
        }
    }
    let hFeature = _.cloneDeep(feature)
    //如果没有需要高亮的要素，则移除所有当前高亮的要素
    if (!hFeature) {
        //移除高亮图层里面所有要素
        highlightLayer.getSource().clear();
        return;
    } else {
        hFeature.setStyle(undefined);
        hFeature.isHighlightFeature = true;
    }
    //移除高亮图层里面所有要素
    removeAllFeature(highlightLayer);
    //往高亮图层添加要素
    addFeature(highlightLayer, hFeature);
}

/**
 * 高亮要素集合
 * @param {*} map 
 * @param {*} features 
 */
export const highlightFeatures = (map, features, img) => {
    if (!features || !features instanceof Array || features.length === 0) {
        return;
    }
    let highlightLayer = isLayerExitByLayerId(map, "highlightLayer");
    //高亮图层不存在，就新建一个高亮图层
    if (!highlightLayer) {
        let imgUrl = img || 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
        //高亮样式设置
        let hightStyle = new Style({
            stroke: new Stroke({
                color: "rgba(190, 123, 123, 0.6)",
                width: 15
            }),
            fill: new Fill({
                color: "rgba(190, 123, 123, 0.6)"
            }),
            image: new Icon({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: imgUrl,
                scale: 1
            })
        })
        //高亮风格的图层：
        highlightLayer = new Vector({
            source: new VectorSource(),
            style: hightStyle
        });
        highlightLayer.layerId = "highlightLayer";
        map.addLayer(highlightLayer);
    } else {
        if (img) {
            //高亮样式设置
            let hightStyle = new Style({
                stroke: new Stroke({
                    color: "rgba(190, 123, 123, 0.6)",
                    width: 15
                }),
                fill: new Fill({
                    color: "rgba(190, 123, 123, 0.6)"
                }),
                image: new Icon({
                    anchor: [0.5, 46],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: img,
                    scale: 1
                })
            })
            highlightLayer.setStyle(hightStyle);
        }else {
            highlightLayer.setStyle(undefined);
        }
    }
    highlightLayer.getSource().clear();
    features.forEach(element => {
        let hElement = _.cloneDeep(element);
        hElement.setStyle(undefined);
        hElement.isHighlightFeature = true;
        addFeature(highlightLayer, hElement);
    });
}

/**
 * 移除高亮的要素
 * @param {*} map 
 * @param {*} feature 
 */
export const removeHighlightFeature = (map, feature) => {
    let highlightLayer = isLayerExitByLayerId(map, "highlightLayer");
    if (!highlightLayer) {
        return;
    }
    removeFeature(highlightLayer, feature);
}

/**
 * 移除所有高亮要素
 * @param {*} map 
 * @param {*} feature 
 */
export const removeAllHighlightFeature = (map, feature) => {
    let highlightLayer = isLayerExitByLayerId(map, "highlightLayer");
    if (!highlightLayer) {
        return;
    }
    removeAllFeature(highlightLayer);
}

/**
 * 定位到要素
 * @param {*} map 
 * @param {*} feature 
 */
export const localToFeature = (map, feature) => {
    let view = map.getView();
    let polygon = feature.getGeometry();
    let size = map.getSize();
    view.fit(polygon, size, { padding: [170, 50, 30, 150] });
}

/**
 * 根据x，y坐标定位
 * @param {*} map 
 * @param {*} x 
 * @param {*} y 
 */
export const localToXY = (map, x, y) => {
    let view = map.getView();
    let feature = new Feature({
        geometry: new Point([x, y])
    })
    let polygon = feature.getGeometry();
    let size = map.getSize();
    view.fit(polygon, size, { padding: [170, 50, 30, 150] });
}